{include file='pub/header'/}
<title>新增商品</title>
<link href="__STATIC__/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
<style>
	tr td{
		text-align: center;
	}
</style>
</head>
<body>
<div class="page-container">
	<form class="form form-horizontal" id="product_add">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>分类：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<span class="select-box" style="width: 300px;">
					<select id="cateId1" class="select" size="1"></select>
				</span>
				<span class="select-box" style="width: 300px;">
					<select id="cateId2" name="cateId" class="select" size="1"></select>
				</span>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>产品名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" name="name">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>产品货号：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" name="gno">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>单价：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" name="cost">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>活动价：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" name="active_price">(如果没有活动价此项不填，默认按单价)
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>单位：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" name="goodattr">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>是否多规格商品：</label>
			<div class="formControls col-xs-8 col-sm-9" id="have_det">
				<label>
					<input type="radio" class="radio-box" value="0" placeholder="" name="have_det" checked onclick="changeProp(this.value)">否
				</label>
				<label>
					<input type="radio" class="radio-box" value="1" placeholder="" name="have_det" onclick="changeProp(this.value)">是
				</label>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>规格：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="hidden" id="submit_prop" name="guige"/>
				<input type="text" id="guige" class="input-text" value="" placeholder=""/>
				<table id="guigeArr" border="1px solid #000">
					<thead>
						<tr>
							<th style="text-align: center; font-weight: bold;">规格名称</th>
							<th style="text-align: center; font-weight: bold;">价格</th>
							<th style="text-align: center; font-weight: bold;">活动价格</th>
							<th style="text-align: center; font-weight: bold;">库存</th>
							<th style="text-align: center; font-weight: bold;">
								<button type="button" class="btn btn-secondary" style="margin: 3px;" onclick="addProp(this)">添加</button>
							</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>是否是组合商品：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<span class="select-box">
					<select name="combine_sta" class="select">
						<option value="0">
							否
						</option>
						<option value="1">
							是
						</option>
					</select>
				</span>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">商品展示图：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div class="uploader-thum-container">
					<div id="fileList" class="uploader-list">
					</div>
					<div id="filePicker">选择图片</div>
				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">商品详情：</label>
			<div class="formControls col-xs-8 col-sm-9">
                <script id="editor" name="instro" type="text/plain" style="width:100%;height:400px;"></script>;
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button class="btn btn-secondary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存商品</button>
				<button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
			</div>
		</div>
	</form>
</div>


{include file="pub/footer"/}
<script type="text/javascript" src="__STATIC__/lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="__STATIC__/lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript" src="__STATIC__/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="__STATIC__/lib/uploadImage.js"></script>
<script type="text/javascript">

$(function(){
    var ue = UE.getEditor('editor');
	//动态添加分类 开始
    var $cateTree = {:json_encode($cateTree)};
    var opts = '';
    $.each($cateTree, function(i, v){
       opts += '<option value="'+i+'">'+v.name+'</option>';
	});
    $("#cateId1").html(opts);
    var cateId = $("#cateId1").val();
    var opts1= '';
    $.each($cateTree[cateId].children, function (i1,v1) {
        opts1 += '<option value="'+v1.id+'">'+v1.name+'</option>';
    });
    $("#cateId2").html(opts1);

    $("#cateId1").on('change', function () {
		var id = $(this).val();
		var opts2 = "";
		$.each($cateTree[id].children, function (i1,v1) {
			opts2 += '<option value="'+v1.id+'">'+v1.name+'</option>';
        });
		$("#cateId2").html(opts2);
    });
	//动态添加分类  结束

	//加载多规格选项
	var is_have_det = $("#have_det input:checked").val();
	changeProp(is_have_det);
	//加载多规格选项

    var config = {
		auto: true,
		swf: '__STATIC__/lib/webuploader/0.1.5/Uploader.swf',
		// 文件接收服务端。
		server: '{:url("Products/addProductImg")}',
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick: '#filePicker',
		// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		resize: false,
		// 只允许选择图片文件。
		accept: {
			title: 'Images',
			extensions: 'gif,jpg,jpeg,bmp,png',
			mimeTypes: 'image/*'
		},
		//fileNumLimit:1
	};
	uploadImage($("#fileList"), config, $("#product_add"), 'image[]', $("#btn-star"));
    $("#product_add").validate({
        rules:{
            name:{
                required:true
            },
			gno:{
              	required:true
			},
			cost:{
                required:true,
				number:true,
				min:0
			},
			goodattr:{
                required:true
			}
        },
		messages:{
            name:{
                required:'分类名称不能为空'
            },
            cost:{
                required:'价格不能为空'
            },
            goodattr: {
                required: '单位不能为空'
            },
			gno:{
                required: '商品货号不能为空'
			}
		},
        onkeyup:false,
        focusCleanup:true,
        success:"valid",
        submitHandler:function(form){
			var have_det = $("#have_det input:checked").val();
			if(have_det == 1){
				var propDom = $("#guigeArr tbody tr");
				var propArr = new Array();
				$.each(propDom, function (i, v) {
				    var propDet = new Array();
					$.each($(v).find("td"), function (ii, vv) {
					    var prop = $(vv).find("input");
					    if(prop){
                            propDet.push(prop.val());
                        }
                    });
					propArr.push(propDet.join(":"));
                });
				$("#submit_prop").val(propArr.join("@"));
			}else{
			    $("#submit_prop").val($("#guige").val());
			}
            $(form).ajaxSubmit({
				type: 'post',
				url: '{:url("Products/productAdd")}',
				success:function(res){
                if(1 == res.code){
                    var index = parent.layer.getFrameIndex(window.name);
                    layer.msg(res.msg, {icon:6, time:1000});
                    setTimeout(function(){
                        parent.location.reload();
                        parent.layer.close(index);
                    }, 1000);
                }else{
                    layer.msg(res.msg, {icon: 5,time:1000});
                }
            }});

        }
    });
});

function changeProp(have_det){
    if(have_det == 1){
        $("#guigeArr").show();
        $("#guige").hide();
    }else{
        $("#guige").show();
        $("#guigeArr").hide();
    }
}

function dropPic(o){
	var id = $(o).parents('.item').attr('id');
	var path = $("."+id).val();
    $("."+id).remove();
    $("#"+id).remove();
	$.post('{:url("Pub/dropPic")}', {path:path},function(){

	});
}

/**
 * 添加规格
 */
function addProp(o){
    var html = '<tr>' +
        '<td style="width: 25%;"><input type="text" class="input-text"/></td>' +
        '<td style="width: 25%;"><input type="text" class="input-text"/></td>' +
        '<td style="width: 25%;"><input type="text" class="input-text"/></td>' +
        '<td style="width: 25%;"><input type="text" class="input-text"/></td>' +
        '<td style="width: 25%;"><button type="button" onclick="$(this).parent().parent().remove()" class="btn btn-secondary">删除</button></td>' +
        '</tr>';
	$(o).closest('table').find('tbody').append(html);
}
</script>
</body>
</html>